<template>
  	<div class="wrapper">
		<div class="header">消息</div>
		<div class="content">
			<div class="search">
				<div class="text">
					<input type="text" placeholder="搜索">
				</div>
				<span class="search_btn"><img src="img/search_btn.png" alt=""></span>
			</div>
			<section class="news-list">
		    <!--未读新消息-->
			<div class="list_wrapper" v-for="item in unRead" v-if="item.unread&&item.unread>0" @click.stop="goNews(item)">
				<div class="list_item2">
					<div class="list_item2_left"><img src="img/face.png" alt=""></div>
					<div class="list_item2_right">
						<span class="friend_name">{{item.name}}</span>
						<span class="friend_desc ctrol">
							<p v-for="subItem in item.recentNew">{{subItem.type=='text'?subItem.text:subItem}}
							</p>
						</span>
					</div>
					<div class="circle" v-if="item.unread&&item.unread>0">{{item.unread}}</div>
				</div>
				<div class="contrl-list">
						<span @click.stop="deleteContact(item,$event)">删除</span>
						<span @click.stop="pushTop()">置顶</span>
				</div>
			</div>
			<!--最近联系人-->
			<div class="list_wrapper" v-for="item in rencentChats" v-if="item" @click.stop="goSession(item)">
				<div class="list_item2" v-if="item.Type == 1">
					<div class="list_item2_left"><img :src="item.C2cImage?item.C2cImage:'a'"></div>
					<div class="list_item2_right">
						<span class="friend_name">{{item.C2cNick?item.C2cNick:item.To_Account}}</span>
						<span class="friend_desc ctrol">
							<p>{{item.MsgShow}}</p>
						</span>
					</div>
					<!--<div class="circle" v-if="item.unread&&item.unread>0">{{}}</div>-->
				</div>
				<div class="list_item2" v-else>
					<div class="list_item2_left"><img :src="item.GroupImage?item.GroupImage:'b'"></div>
					<div class="list_item2_right">
						<span class="friend_name">{{item.GroupNick?item.GroupNick:item.ToAccount}}</span>
						<!--<span class="friend_desc ctrol">
							<p></p>
						</span>-->
					</div>
					<!--<div class="circle"></div>-->
				</div>
				<div class="contrl-list">
						<span @click.stop="deleteContact(item,$event)">删除</span>
						<span @click.stop="pushTop()">置顶</span>
				</div>
			</div>
			</section>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
import Client from "../../config/common";
import convertMsgtoHtml from '../../config/convertMsg';
export default {
    data(){
        return{
		   loginInfo:{},
		   unRead:[],
		   rencentOri:null,//原始联系人
		   rencentChats:null//删除监听新消息联系人后的数据 
        }
    },

	created(){
		Client.login((loginInfo) => {
			 this.loginInfo = loginInfo;
			 this.getRencent();
		});
		//this.onMsgNotify([webim.Msg]);
	},

	mounted(){
		this.slider();
    },

    components:{
       // headTop
    },

    computed:{

    },

    methods:{
		//获取未读c2c消息
		getMsgNotify(){
			webim.syncMsgs(
				resp => {
					let sess = [];
					let sessMap=webim.MsgStore.sessMap();
					for (let i in sessMap) {
						sess.push(sessMap[i]._impl);
					}
					console.log('sess5588',sess);
					//不同用户发送的消息组
					let accountMsg = null;
					sess.forEach( arr =>{
						//不同单个用户消息数组
						accountMsg = arr.msgs;
						//最新发送的一条消息
						let lastNew = accountMsg[accountMsg.length - 1];
						//console.log('lastNew',lastNew);
						let trans = convertMsgtoHtml(lastNew);
						arr.recentNew = Client.transNews(trans);
						//console.log('arr',arr)
					});
					this.unRead = sess;
					console.log('this.unRead',sess);
					console.log('this.rencentOri',this.rencentOri);
					//如果该用户存在最近联系人列表里，将其去除
					if(this.rencentOri){
						this.rencentOri.forEach((ele,index)=>{
							this.unRead.forEach((val)=>{
								if((ele.To_Account == val.id) || (ele.ToAccount == val.id)){
									console.log('重复的账户',ele.To_Account);
									this.rencentOri.splice(index,1,null);
								}
							})
						})
                        this.rencentChats = this.rencentOri;
					}
				},
				err => {
              		alert(err.ErrorInfo);
                }
			);
		},
		//获取最近联系人
		getRencent(){
			webim.getRecentContactList({
				'Count': 10 //最近的会话数 ,最大为100
			},(resp)=>{
				console.log('最近联系人',resp);
				this.rencentOri = resp.SessionItem;
				//获取最近联系人
				this.getMsgNotify();
				//业务处理
			},(resp)=>{
				//console.log('666',resp)
				//错误回调
			});
		},
		//删除最近联系人
		deleteContact(item,ele){
			let toId = item.Type == 1 ? toId = item.To_Account:toId = item.ToAccount;
			let dataContact = {
				'To_Account': toId,
				'chatType': item.Type
			}
			$(ele.target).parents('.list_wrapper').remove();
			if(typeof dataContact.To_Account=='undefined'){
				return
			}
			webim.deleteChat(
				dataContact,
				(resp) => {
					console.log('删除联系人成功',resp);
				},
				(resp)=>{
					console.log(resp);
				}
			);
		},
		//跳转未读消息聊天
		goNews(item){
			this.$router.push({path: "/session", query:{id: item.id,selType:item.type}});
		},
		//跳转最近联系人聊天
		goSession(item){
			//console.log(item);
                if(item.Type == 2){
					this.$router.push({path: "/session", query:{id:item.ToAccount,selType:'GROUP'}});
				}else{
					this.$router.push({path: "/session", query:{id: item.To_Account,selType:'C2C'}});
				}
		},
		slider(){
		let initX,moveX,X = 0,objX = 0;
		let aimEle = document.querySelector('.news-list');
		aimEle.addEventListener('touchstart',function(event){
			event.preventDefault();
			let obj = event.target.parentNode;
			if(obj.className == "list_wrapper"){
				initX = event.targetTouches[0].pageX;
				objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
			}
			if( objX == 0){
				aimEle.addEventListener('touchmove',function(event) {
					event.preventDefault();
					let obj = event.target.parentNode;
					if (obj.className == "list_wrapper") {
						moveX = event.targetTouches[0].pageX;
						X = moveX - initX;
						if (X > 0) {
							obj.style.WebkitTransform = "translateX(" + 0 + "px)";
						}
						else if (X < 0) {
							let l = Math.abs(X);
							obj.style.WebkitTransform = "translateX(" + -l + "px)";
							if(l>160){
								l=160;
								obj.style.WebkitTransform = "translateX(" + -l + "px)";
							}
						}
					}
				});
			}
			else if(objX<0){
			  aimEle.addEventListener('touchmove',function(event) {
					event.preventDefault();
					let obj = event.target.parentNode;
					if (obj.className == "list_wrapper") {
						moveX = event.targetTouches[0].pageX;
						X = moveX - initX;
						if (X > 0) {
							//向右滑动还原
							let r = -20 + Math.abs(X);
							obj.style.WebkitTransform = "translateX(" + r + "px)";
							if(r>0){
								r=0;
								obj.style.WebkitTransform = "translateX(" + r + "px)";
							}
						}
						else {     //向左滑动
							obj.style.WebkitTransform = "translateX(" + -160 + "px)";
						}
					}
				});
			}

		})
		aimEle.addEventListener('touchend',function(event){
			event.preventDefault();
			let obj = event.target.parentNode;
			if(obj.className == "list_wrapper"){
				objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
				if(objX>-40){
					obj.style.WebkitTransform = "translateX(" + 0 + "px)";
				}else{
					obj.style.WebkitTransform = "translateX(" + -160 + "px)";
				}
			}
		 })
	},
		
	},
	watch:{
          'loginInfo.onMsgNotify':function(val){  
			  if(val == null){
				  console.log('空对象',)
				  return
			  }else{
				  this.getMsgNotify();
			  }
            }  
	}
}

</script>

<style lang="scss"> 
   @import '../../style/friend_info';
   .friend_desc.ctrol{
	   p{
		   display:inline-block;
	   }
   }
   .news-list{
	overflow: hidden;
	.list_wrapper{
		position:relative;
        -webkit-transform: translateX(0px);
		.contrl-list{
			display:-webkit-box;
			height:100%;
			position: absolute;
			width:160px;
			top:0;
			right:-160px;
			span{
				display: flex;
				align-items: center;
				justify-content:center;
				-webkit-box-flex:1.0;
				color:#fff;
				&:first-child{
					background-color:red;
				}
				&:last-child{
					background-color:blue;
				}
			}
		}
	}
}
</style>